<template>
	<vCommonPage type="1" title="自助取号">
		<div slot="customContent" class="content zyqd">
			<div class="CenterBox">
				<div class="left flex">
					<div class="doctorType">患者：{{$store.state.user.userinfo.patientName}}</div>
				</div>
				<div class="left flex">
					<div class="patientName">待取号：{{tableData?tableData.length:0}}</div>
				</div>
			</div>
			<div class="tableBox">
				<el-table class="table" :header-cell-style="$tableTitleStye" :cell-style="{color:'#435C7A'}"
					:data="tableData" :show-overflow-tooltip="true">
					<el-table-column type="index" label="序号" width="100"></el-table-column>
					<el-table-column prop="deptName" width="125" label="就诊科室"></el-table-column>
					<el-table-column prop="doctorName" width="125" label="就诊医生"></el-table-column>
					<!-- <el-table-column prop="title" width="140" label="医生职称"></el-table-column> -->
					<el-table-column prop="regTypeId" width="110" label="号别"></el-table-column>
					<el-table-column prop="regDate" width="150" label="就诊日期"></el-table-column>
					<el-table-column prop="regTime" width="130" label="就诊时间"></el-table-column>
					<el-table-column prop="totalFee" width="100" label="挂号费"></el-table-column>
					<el-table-column width="150" label="操作">
						<template slot-scope="scope">
							<el-button :class="parseInt(scope.row.getNumberFlag)==1?'elBtn':'huiBtn'" type="success"
								size="20" @click="singleClick(scope.row)">取号
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="bottomBox">
				<el-button class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button class="BtnTextHome" @click="goBackHome()">首页</el-button>
				<el-button :class="isAllUsed?'BtnTextGreen huiColor':'BtnTextGreen'"
					style="width: 180px !important;margin-left: 525px !important;" @click="allClicke()">全部取号
				</el-button>
			</div>
			<transition name="el-fade-in-linear">
				<div class="singleQhXx" v-show="singleQhXxShow" v-loading="singleLoading" element-loading-text="加载中…"
					element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
					<div class="singTitle">
						取号信息
					</div>
					<div class="singCenter">
						<div class="singItem" v-for="(item,index) in singleObj">
							<div class="singItemLeft">{{item.name}}</div>
							<div class="singItemRight">{{item.value}}</div>
						</div>
					</div>
					<div class="singleBtomBtnBox">
						<el-button class="cancel" @click="singleCancle()">取消</el-button>
						<el-button class="makeSure" @click="singleMakeSure()">确认</el-button>
					</div>
				</div>
			</transition>
			<transition name="el-fade-in-linear">
				<div class="allQhXx" v-show="allQhXxShow" v-loading="allLoading" element-loading-text="加载中…"
					element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
					<div class="singTitle">
						取号信息
					</div>
					<div class="allScroll">
						<div class="allItem" v-for="(item,index) in allObj">
							<div class="allItemLeft">{{index+1}}</div>
							<div class="allItemRight">
								<div :class="indexs%2==0?'allItemChilFather alLeft':'allItemChilFather alRight' "
									v-for="(allChilItem,indexs) in item">
									<div :class="indexs == 0 || indexs == 1?'allItemsLeft mar10':'allItemsLeft'">
										{{allChilItem.name}}
									</div>
									<div :class="indexs == 0 || indexs == 1?'allItemsRight mar10':'allItemsRight'">
										{{allChilItem.value}}
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="singleBtomBtnBox">
						<el-button class="cancel" @click="allCancle()">取消</el-button>
						<el-button class="makeSure" @click="allMakeSure()">确认</el-button>
					</div>
				</div>
			</transition>
			<vTip v-if="tipText" :tipText="tipText"></vTip>
			<div v-show="singleQhXxShow || allQhXxShow||tipText" @click="hoddenBox()" class="yiny"></div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		getRegInfo, //查询号源
		regNumberConfirm, //单个取号
		regNumberConfirmAll //全部取号
	} from "@api/apiBox/zzqh"
	import {
		Printerconf
	} from '@api/tools/rprinter.js'
	export default {
		name: "zzqh",
		data() {
			return {
				tableData: [],
				singleQhXxShow: false,
				allQhXxShow: false,
				singleObj: [],
				allObj: [],
				pconf: new Printerconf(), //初始化凭条打印
				tipText: '',
				singleLoading: false,
				allLoading: false,
				isAllUsed: false
			};
		},
		methods: {
			hoddenBox() {
				this.singleQhXxShow = false;
				this.allQhXxShow = false;
				this.tipText = "";
			},
			singleCancle() {
				this.singleQhXxShow = false;
			},
			async singleMakeSure() {
				this.singleLoading = true;
				let data = {
					data: {
						id: this.singleObj.id
					},
					that: this
				};
				const res = await regNumberConfirm(data);
				this.singleLoading = false;
				console.log(res, '单个取号结果')
				this.singleQhXxShow = false;
				this.openPrintTip(0); //打印凭条
			},
			allCancle() {
				this.allQhXxShow = false;
			},
			async allMakeSure() {
				this.allLoading = true;
				let data = {
					data: {
						"cardNo": this.$store.state.appointment.cardNo, //卡片编号
						"cardType": this.$store.state.appointment.card.num, //卡片类别
						"hospitalId": this.$store.state.terminfo.hospId, //医院ID
					},
					that: this
				}
				const res = await regNumberConfirmAll(data);
				this.allLoading = false;
				console.log(res, '全部取号结果')
				this.allQhXxShow = false;
				this.openPrintTip(1); //打印凭条
			},
			makeUpSignleData(data) {
				let list = [{
						name: '姓名:',
						value: this.$store.state.user.userinfo.patientName
					},
					{
						name: '卡号:',
						value: this.$store.state.appointment.cardNo
					},
					{
						name: '就诊科室:',
						value: data['deptName']
					},
					{
						name: '就诊医生:',
						value: data['doctorName']
					},
					{
						name: '医生职称:',
						value: data['title']
					},
					{
						name: '号别:',
						value: data['regTypeId']
					}, {
						name: '就诊日期:',
						value: data['regDate']
					}, {
						name: '就诊时间:',
						value: data['regTime']
					}, {
						name: '费用:',
						value: data['totalFee']
					}
				];
				return list;
			},
			allClicke() {
				let dataList = [];
				let index = 1;
				for (let item of this.tableData) {
					if (parseInt(item.getNumberFlag) == 1) {
						index += 1;
						let res = this.makeUpSignleData(item);
						dataList.push(res)
					}
				}
				console.log(dataList, 'dataList')
				if (dataList.length == 0) {
					this.openTipText("没有可取的号！");
				} else {
					this.allObj = dataList;
					this.allQhXxShow = true;
				}
			},
			singleClick(data) {
				if (parseInt(data.getNumberFlag) == 1) {
					console.log(data)
					let list = this.makeUpSignleData(data);
					this.singleObj = list;
					this.singleObj.id = data.id;
					this.singleQhXxShow = true;
				} else {
					this.openTipText("该挂号单今天无法取号，请到就诊日期进行取号！");
				}

			},
			openTipText(text){
				this.tipText = text;
				setTimeout(()=>{
					this.tipText = "";
				},3000)
			},
			//开始打印凭条
			async openPrintTip(type) {
				if (type == 0) {
					let printdata = {
						name: this.getPrintDeviceNameByPort('73'),
						data: this.singleObj
					}
					console.log(this.getPrintNameByPort("73"))
					await this.pconf.zzqhprint(this.getPrintNameByPort("73"), this, printdata).then(res => {
						this.$router.push({
							name: 'printTickertape'
						})
					}).catch(e => {
						console.log(e, '错误')
						this.openTipText("抱歉，预约凭证打印失败，请联系管理员……！");
					});
				} else if (type == 1) {
					for (let item of this.allObj) {
						let printdata = {
							name: this.getPrintDeviceNameByPort('73'),
							data: item
						}
						console.log(this.getPrintNameByPort("73"))
						await this.pconf.zzqhprint(this.getPrintNameByPort("73"), this, printdata).then(res => {
							this.$router.push({
								name: 'printTickertape'
							})
						}).catch(e => {
							console.log(e, '错误')
							this.openTipText("抱歉，预约凭证打印失败，请联系管理员……！");
						});
					}
				}

			},
			//获取打印机名称
			getPrintDeviceNameByPort(devtype) {
				let term = this.$store.state.terminfo.deviceConfs;
				for (let item of term) {
					console.log(item)
					if (item.deviceType == devtype) {
						return item.deviceName;
					}
				}
				return "";
			},
			//获取打印机型号
			getPrintNameByPort(devtype) {
				let term = this.$store.state.terminfo.deviceConfs;
				console.log(term, 'name')
				for (let item of term) {
					console.log(item)
					if (item.deviceType == devtype) {
						return item.deviceModel;
					}
				}
				return "";
			},
			//获取取号信息
			async getInitData() {
				let data = {
					data: {
						cardNo: this.$store.state.appointment.cardNo, //卡片编号
						cardType: this.$store.state.appointment.card.num, //卡片类别
						hospitalId: this.$store.state.terminfo.hospId //医院ID
					},
					that: this
				}
				let res = await getRegInfo(data);

				this.isAllUsed = false;
				for (let item of res.data) {
					//如果有一条可以取号 则全部取号按钮亮起来
					if (parseInt(item.getNumberFlag) == 1) {
						this.isAllUsed = true;
					}
				}

				this.tableData = res.data;
				for (let item of this.tableData) {
					if (item.regTypeId == 1)
						item.regTypeId = '普通号';
					else if (item.regTypeId == 2) {
						item.regTypeId = '专家号';
					}
				}
			}
		},
		computed: {},
		components: {},
		mounted() {},
		created() {
			this.getInitData();
		}
	};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
	.flex {
		display: flex;
	}

	.red {
		color: #FE5F5F;
	}

	.hui {
		color: #A1ADBB;
	}

	.deepHui {
		color: #435C7A;
	}



	.greenBottom {
		height: 90px;
		background: #46C349;
		border-radius: 6px;
		display: flex;
		padding: 0px 15px;
		margin-left: 0px;
		margin-right: 20px;
		/*实现垂直居中*/
		align-items: center;
	}

	.upPage {
		margin-left: 520px;
	}

	.BtnText {
		text-align: center;
		width: 100%;
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.totalPay {
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin-left: 300px;
		padding-top: 20px;
	}

	.content {
		width: 100%;

	}

	.CenterBox {
		display: flex;
		width: 100%;
	}

	.doctorType {
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		line-height: 48px;
		margin-left: 2.871428rem;
	}


	.patientName {
		width: 100%;
		text-align: right;
		margin-right: 3.2rem;
		font-size: 2.742857rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
	}


	.left {
		width: 50%;
		text-align: left;
	}

	.right {
		width: 50%;
		justify-content: flex-end;
	}

	.title {
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		padding: 1.28571rem 0;
		margin-top: 12px;
		text-align: right;
		margin-bottom: 0px;
	}

	.elBtn {
		font-size: 2.5vw;
		padding: 15px;
		padding-top: 20px;
		background: #46C349;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
	}

	.huiBtn {
		background: #557182;
		color: white;
		font-size: 2.5vw;
		padding: 15px;
		padding-top: 20px;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		border: none;
	}

	.huiColor {
		background: #557182;
		border: none;
		color: white;
	}

	.huiBtn:active {
		background: #557182;
		color: white;
		border-radius: 8px;
	}


	.ocatipal {
		opacity: 0.5;
		border-radius: 8px;
	}

	.table {
		margin-top: 30px;
		width: 95%;
		font-size: 2.028571rem;
		font-weight: 400;
		margin-left: 2.6%;
	}

	.tableBox {
		height: 600px;
		margin-bottom: 20px;
		overflow: auto;
		overflow-x: hidden;
		borderRadius: '8px 8px 0px 0px';
	}

	.bottomBox {
		display: flex;
		margin-top: 10px;
	}



	.pageBox {
		margin-left: 10px;
		margin-right: 10px;
		display: flex;
		font-size: 3.5vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		/*实现垂直居中*/
		align-items: center;
	}

	.BtnText {
		text-align: center;
		width: 100%;
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.singleQhXx {
		position: fixed;
		left: 272px;
		top: 1074px;
		width: 552px;
		height: 779px;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		z-index: 3;

		.singTitle {
			display: flex;
			width: 100%;
			height: 77px;
			background: #EAF4F9;
			border-radius: 8px 8px 0px 0px;
			text-align: center;
			justify-content: center;
			align-items: center;
			font-size: 36px;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #435C7A;
		}

		.singCenter {
			height: 600px;
			width: 100%;
			overflow: auto;
		}



		.singItem {
			width: 100%;
			display: flex;
			margin-top: 19px;

			.singItemLeft {
				margin-left: 58px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #A1ADBB;
			}

			.singItemRight {
				margin-left: 28px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #435C7A;
			}

		}



		.singleBtomBtnBox {
			display: flex;
			width: 100%;
			text-align: center;
			justify-content: center;
			align-items: center;
			margin-top: 20px;
			position: absolute;
			bottom: 20px;

			.cancel {
				width: 150px;
				height: 70px;
				background: #D7DEE3;
				box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
				border-radius: 8px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #435C7A;
				margin-right: 20px;

			}

			.makeSure {
				width: 150px;
				height: 70px;
				background: #46C349;
				box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
				border-radius: 8px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}

		}
	}


	.allQhXx {
		width: 1012px;
		height: 779px;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		position: fixed;
		left: 34px;
		top: 1074px;
		z-index: 3;
		overflow: auto;

		.allScroll {
			height: 600px;
			width: 100%;
			overflow: auto;

			.allItem {
				margin-top: 18px;
				width: 963px;
				background: #F3FBFF;
				border-radius: 8px;
				margin-left: 23px;
				display: flex;

				.allItemLeft {
					width: 67px;
					background: #D3EDFA;
					border-radius: 8px 0px 0px 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36px;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #435C7A;
				}

				.allItemRight {
					width: 896px;
					display: flex;
					flex-wrap: wrap;

					.allItemChilFather {
						margin-bottom: 10px;
						display: flex;

						.mar10 {
							margin-top: 10px;
						}

						.allItemsLeft {
							margin-left: 28px;
							font-size: 32px;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #A1ADBB;
							letter-spacing: 2px;
						}

						.allItemsRight {
							margin-left: 2px;
							font-size: 32px;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #435C7A;
						}
					}

					.alLeft {
						width: 40%;
					}

					.alRight {
						width: 60%;
					}

				}
			}

		}

		.singTitle {
			display: flex;
			width: 100%;
			height: 77px;
			background: #EAF4F9;
			border-radius: 8px 8px 0px 0px;
			text-align: center;
			justify-content: center;
			align-items: center;
			font-size: 36px;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #435C7A;
		}

		.singleBtomBtnBox {
			display: flex;
			width: 100%;
			text-align: center;
			justify-content: center;
			align-items: center;
			margin-top: 20px;
			position: fixed;
			bottom: 80px;

			.cancel {
				width: 150px;
				height: 70px;
				background: #D7DEE3;
				box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
				border-radius: 8px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #435C7A;
				margin-right: 20px;

			}

			.makeSure {
				width: 150px;
				height: 70px;
				background: #46C349;
				box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
				border-radius: 8px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}

		}

		.empty {
			height: 100px;
		}
	}
</style>
